<template>
  <div class="app-container">
    <el-card v-loading="loading">
      <div slot="header">
        <el-button type="primary" @click="resetForm()">返回</el-button>
      </div>
      <el-form ref="ruleForm" :model="formData" label-width="150px">
        <el-form-item label="物料号码" prop="materialNumber">
          <el-input placeholder="物料号码" v-model="formData.materialNumber"/>
        </el-form-item>
<!--        <el-form-item label="物料编码" prop="logisticsCode">-->
<!--          <el-input placeholder="物料编码" v-model="formData.logisticsCode"/>-->
<!--        </el-form-item>-->
        <el-form-item label="物料描述" prop="describeText">
          <el-input placeholder="物料描述" v-model="formData.materialName"/>
        </el-form-item>
        <el-form-item label="物料描述长文本" prop="description">
          <el-input v-model="formData.description" style="width: 500px;" type="textarea" :rows="5" />
        </el-form-item>
        <el-form-item label="易派克物料标识" prop="ypkProductFlag">
          <el-input placeholder="易派克物料标识" v-model="formData.ypkProductFlag" />
        </el-form-item>
        <el-form-item label="易派克上下架标识 " prop="ykpDownPut">
          <!--           <el-radio-group v-model="formData.ykpDownPut">-->
          <!--              <el-radio :label="1">上架</el-radio>-->
          <!--              <el-radio :label="0">下架</el-radio>-->
          <!--            </el-radio-group>-->
          <el-input placeholder="易派克上下架标识" v-model="formData.ykpDownPut" />
        </el-form-item>
        <el-form-item label="移动平均价格" prop="avgPrice">
          <el-input placeholder="移动平均价格" v-model="formData.avgPrice"/>
        </el-form-item>
        <el-form-item label="计划交货时间" prop="planDeliveryDays">
          <el-input placeholder="计划交货时间 单位天" v-model="formData.planDeliveryDays"/>
        </el-form-item>
        <el-form-item label="易派克上架时间 " prop="ypkPutDate">
          <el-date-picker
            v-model="formData.ypkPutDate"
            format="yyyy-MM-dd HH:mm:ss"
            type="datetime"
            placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="易派克下架时间 " prop="ykpDownDate">
          <el-date-picker
            v-model="formData.ykpDownDate"
            format="yyyy-MM-dd HH:mm:ss"
            type="datetime"
            placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="物料组编号" prop="materialGroupNumber">
          <el-input placeholder="物料组编号" v-model="formData.materialGroupNumber"/>
        </el-form-item>
        <!--<el-form-item label="材料名称" prop="materialName">-->
          <!--<el-input placeholder="材料名称" v-model="formData.materialName" />-->
        <!--</el-form-item>-->
        <el-form-item label="计量单位" prop="unit">
          <el-input placeholder="计量单位" v-model="formData.unit" />
        </el-form-item>




        <el-form-item>
          <el-button @click="resetForm">关闭</el-button>
          <el-button    :loading="isAdd" type="primary" @click="submitForm('ruleForm')">
            <span v-if="isAdd">提交中...</span>
            <span v-else>提交</span>
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { materailBasicInfoDetail, newMaterailBasicInfo, updateMaterailBasicInfo } from '@/api/essentialInformation.js'
import { formatTime } from '@/utils/utils.js'
import { mapState } from "vuex";
let $this = null
export default {
  name: 'submitForm',
  props: {
    subData: {
      type: Object,
      default: {}
    }
  },
  computed: {
    ...mapState(["authList"]),
  },
  data () {
    return {
      isAdd: false,
      loading: false,
      formData: {},
      rules: {
        avgPrice: [
          { required: true, message: '请输入0-9整数或者小数(小数保留两位)', trigger: 'red' },
          {message: '请输入0-9整数或者小数(小数保留两位)', trigger: 'red' },
          {
            pattern: /^(([^0][0-9]+|0)\.([0-9]{1,2})$)|^(([^0][0-9]+|0)$)|^(([1-9]+)\.([0-9]{1,2})$)|^(([1-9]+)$)/,
            message: '请输入0-9整数或者小数(小数保留两位)',
            trigger: 'red'
          }
        ],
        materialGroupNumber: [
          { required: true, message: '请输入字母或者数字', trigger: 'red' },
          {message: '请输入字母或者数字', trigger: 'red' },
          {
            pattern: /^[A-Za-z0-9]+$/,
            message: '请输入字母或者数字',
            trigger: 'red'
          }
        ],
        materialName: [
          { required: true, message: '请输入中文汉字', trigger: 'red' },
          {message: '请输入中文汉字', trigger: 'red' },
          {
            pattern: /^[\u4e00-\u9fa5]/,
            message: '请输入中文汉字',
            trigger: 'red'
          }
        ],
        materialNumber: [
          { required: true, message: '请输入0-9数字', trigger: 'red' },
          {message: '请输入0-9数字', trigger: 'red' },
          {
            pattern: /^[0-9]/,
            message: '请输入0-9数字',
            trigger: 'red'
          }
        ]
      }
    }
  },
  created () {
    $this = this
    if ($this.subData.btnId == 1) {
      $this.materailBasicInfoDetail()
    }
  },
  methods: {
    authFilter (code) {
      let flag = false
      if(this.authList.length) {
        this.authList.forEach(item => {
          if(item.resourceCode == code) {
            flag = true
          }
        })
      }
      return flag
    },
    materailBasicInfoDetail () {
      $this.loading = true
      materailBasicInfoDetail($this.subData.id).then(res => {
        $this.loading = false
        $this.formData = res.data.data
      }).catch(err => { $this.loading = false })
    },
    // 新增，编辑
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (!valid) {
          return $this.$message.error('请填写正确表单信息')
        }
        $this.formData.ykpDownDate = formatTime($this.formData.ykpDownDate)
        $this.formData.ypkPutDate = formatTime($this.formData.ypkPutDate)
        if ($this.subData.btnId == 0) {
          $this.isAdd = true
          newMaterailBasicInfo($this.formData).then(res => {
            $this.isAdd = false
            if (res.data.code == 500) {
              return $this.$message.error(res.data.message)
            }
            $this.$emit('refresh')
          }).catch(err => {
            $this.isAdd = false
            return $this.$message.error(err.message)
          })
        }
        if ($this.subData.btnId == 1) {
          $this.isAdd = true
          updateMaterailBasicInfo($this.formData).then(res => {
            $this.isAdd = false
            if (res.data.code == 500) {
              return $this.$message.error(res.data.message)
            }
            $this.$emit('refresh')
          }).catch(err => {
            $this.isAdd = false
            return $this.$message.error(err.message)
          })
        }
      })
    },
    resetForm () {
      $this.$emit('closeView')
    }
  }
}
</script>

<style scoped lang="scss">
  .el-input {
    width: 500px;
  }
</style>
